<template>
  <div>
    <el-steps :active="step" finish-status="success">
      <el-step title="基本信息" icon="el-icon-tickets"></el-step>
      <el-step title="规格参数" icon="el-icon-menu"></el-step>
      <el-step title="销售属性" icon="el-icon-goods"></el-step>
      <el-step title="SKU信息" icon="el-icon-position"></el-step>
      <el-step title="保存完成" icon="el-icon-edit"></el-step>
    </el-steps>
    <div>
      <spuinfo-add-or-update ref="spuInfoAddOrUpdateRef" v-show="step===1" :hub="hub"></spuinfo-add-or-update>
      <spu-attr-value ref="spuAttrValueRef" v-show="step===2"></spu-attr-value>
      <spu-sell-attr-value ref="spuSellAttrValue" v-show="step===3"></spu-sell-attr-value>
      <sku-info ref="skuInfoRef" v-show="step===4" :hub="hub"></sku-info>
    </div>
    <div>
      <el-form inline>
        <el-form-item>
          <el-button @click="previous" v-show="step>1">上一步</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="nextStep" v-show="step<6">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import spuApi from '../../../api/product/spuApi'
export default {
  name: 'spuadd', //发布商品

  //router:router
  components: {
    'spuinfo-add-or-update': () => import('./spuAddComponent/spuinfo-add-or-update'),
    'spu-attr-value': () => import('./spuAddComponent/spuAttrValue'),
    'spu-sell-attr-value': () => import('./spuAddComponent/spuSellAttrValue'),
    'sku-info': () => import('./spuAddComponent/skuInfo')
  },
  data () {
    return {
      step: 1,
      /**
       * 第0个元素添加空数据是为了，数组的下标和第几个步骤的数字一致
       * */
      stepComponentData: ['nullStr'],
      categoryId: null,
      hub: null
    }
  },
  methods: {
    previous () {
      this.step -= 1
    },
    nextStep () {
      this.saveComponentData()
    },
    saveComponentData () {
      if (this.step === 1) {
        this.inStep1ToStep2()
      } else if (this.step === 2) {
        this.inStep2ToStep3()
      } else if (this.step === 3) {
        this.inStep3ToStep4()
      } else if (this.step === 4) {
        this.prepareToSubmit()
      }

    },
    /**
     * 当前在步骤一，点击下一步，跳转步骤二
     * */
    inStep1ToStep2 () {
      /**
       * 从子组件中取出数据存放到父组件中
       * */
      //if (this.step === 1) {

      this.categoryId = this.$refs.spuInfoAddOrUpdateRef.dataForm.catalogId

      if (this.categoryId == null) {

        this.$message({
          message: '需要先设置商品类型，才能下一步',
          type: 'warning'
        })
        return
      }
      this.stepComponentData[1] = this.$refs.spuInfoAddOrUpdateRef.dataForm

      console.log(`第${this.step}步的数据已经保存到父组件`, this.stepComponentData[this.step])

      this.initStep2(this.categoryId)

      //}
    },

    /**
     * 初始化步骤二
     * */
    initStep2 (catelogId) {
      this.step = 2
      this.$refs.spuAttrValueRef.getAttrToInput(catelogId)
    },

    /**
     * 当前在步骤二，准备跳转步骤三
     * */
    inStep2ToStep3 () {
      let attrGroupVoList = this.$refs.spuAttrValueRef.getAttrGroupVoList()

      console.log('步骤二获取到的数据是', attrGroupVoList)

      /**
       * 更新父组件中步骤二的数据
       * */
      this.stepComponentData[2] = attrGroupVoList

      this.initStep3(this.categoryId)
    },

    initStep3 (categoryId) {
      this.step = 3
      this.$refs.spuSellAttrValue.getSellAttrOfCategory(categoryId)
    },

    inStep3ToStep4 () {
      let sellAttrList = this.$refs.spuSellAttrValue.getAttrList()

      this.stepComponentData[3] = sellAttrList
      console.log('步骤3提交的数据是', this.stepComponentData[3])

      this.initStep4(this.stepComponentData[3], this.stepComponentData[1])

    },

    /**
     * 初始化步骤四需要步骤三和步骤一的提交的数据
     * */
    initStep4 (sellAttrList, step1Data) {
      this.step = 4
      this.$refs.skuInfoRef.init(sellAttrList, step1Data)
      this.$refs.skuInfoRef.localHub = this.hub
    },

    prepareToSubmit () {
      this.stepComponentData[4] = this.$refs.skuInfoRef.getCustomizedDescartes()

      let submitData = {
        spuInfo: this.stepComponentData[1],
        spuAttr: this.stepComponentData[2],
        spuSellAttr: this.stepComponentData[4]
      }

      console.log('全部的数据是', this.stepComponentData)
      console.log("最终提交到后端的数据是",JSON.stringify(submitData));

      spuApi.addSpuToProduct(submitData).then(({data})=>{
        this.$message({
          message:'添加成功',
          type:'success'
        })
      });
    }

  },
  mounted () {

    this.hub = new Vue()

    // console.log("父组件中的hub已经创建",this.hub)

    //TODO 为了测试而写死
    setTimeout(() => {

      this.$refs.spuInfoAddOrUpdateRef.localHub = this.hub

      let testData = [
        {
          attrId: 15,
          attrName: '颜色',
          attrValue: '赤茶橘,天空之境',
        }, {
          attrId: 18,
          attrName: '选择版本',
          attrValue: '8G+256G,6G+128G',
        }, {
          attrId: 19,
          attrName: '内存',
          attrValue: '8G,6G',
        }]
      // this.initStep4(testData, this.stepComponentData[1])
    }, 1000)

  }
}
</script>

<style scoped>

</style>
